<template>
  <view class="component-container">
    <view class="infos">
      <view class="info-item">
        <span class="info-title">今日预计收入(元)</span>
        <view class="info">
          <span class="info-data">{{ todayCompletedStatistics?.income || '0.0' }}</span>
          <span class="info-detail">我的账户<uni-icons type="right" size="10"></uni-icons> </span>
        </view>
      </view>
      <view class="info-item">
        <span class="info-title">今日完成单量(单)</span>
        <view class="info">
          <span class="info-data">{{ todayCompletedStatistics?.completedQuantity || 0 }}</span>
          <span class="info-detail">订单统计<uni-icons type="right" size="10"></uni-icons> </span>
        </view>
      </view>
    </view>
    <view class="control">
      <view>
        <uni-icons custom-prefix="iconfont" type="icon-dingdanshensuliebiao" size="15" color="#d10d10"></uni-icons>
        <span class="control-name">违规申诉</span>
      </view>
      <view>
        <uni-icons custom-prefix="iconfont" type="icon-pingjiaguanli" size="15" color="#d10d10"></uni-icons>
        <span class="control-name">我的评价</span>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import $API from '@/api'
import $store from '@/store'
import type CompletedQuantityStatistics from '@/types/response/delivery-order'
import { TimeOperations } from '@/utils/TimeUtils'
import { onMounted } from 'vue'
import { ref } from 'vue'
const todayCompletedStatistics = ref<CompletedQuantityStatistics>()
async function refreshTodayCompletedStatistics() {
  // 获取当前时间
  const minToday = new Date()
  // 将时间设置为今天的00:00
  minToday.setHours(0, 0, 0, 0)
  const result = await $API.deliveryOrder.getCompletedQuantityStatistics(
    new TimeOperations().setCoreDate(minToday).formatDate('yyyy-MM-dd HH:mm:ss')
  )
  if (result.success) todayCompletedStatistics.value = result.data
}

onMounted(() => {
  refreshTodayCompletedStatistics()
})
// 监听当骑手送达时，刷新
$store.order.onRiderDeliveredMeal.on(refreshTodayCompletedStatistics)
</script>

<style scoped lang="scss">
.component-container {
  overflow: hidden;
  border-radius: 20rpx;
  background: #fff;

  .infos {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 20rpx;
    background: #ffd100;

    .info-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .info-title {
        font-size: 26rpx;
        font-weight: 700;
      }

      .info {
        display: flex;
        flex-direction: column;
        align-items: center;

        .info-data {
          height: 80rpx;
          font-size: 45rpx;
          font-weight: 700;
          line-height: 80rpx;
        }

        .info-detail {
          font-size: 23rpx;
        }
      }
    }
  }

  .control {
    display: flex;
    justify-content: space-around;

    .control-name {
      display: inline-block;
      margin-left: 5rpx;
      padding: 10px 0;
      font-size: 26rpx;
    }
  }
}
</style>
